---
title: Passport details
scenario: |
  As part of an online service, you are asked to provide your passport details.

  Things to try:

  1. Intentionally avoid answering the questions before continuing to the next page.
  2. Intentionally only fill in the day (and not month or year) of the expiry date.
---

{# This example is based of the "Passport details" pattern: https://design-system.service.gov.uk/patterns/question-pages/ #}
{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ "Error: " if errorSummary | length }}{{ pageTitle }} - GOV.UK{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      {% if errorSummary | length %}
        {{ govukErrorSummary({
          titleText: "There is a problem",
          errorList: errorSummary
        }) }}
      {% endif %}

      <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>

      <form method="post" novalidate>

        {{ govukInput({
          label: {
            text: "Passport number",
            classes: "govuk-label--m"
          },
          hint: {
            text: "For example, 502135326"
          },
          classes: "govuk-input--width-10 govuk-input--extra-letter-spacing",
          id: "passport-number",
          name: "passport-number",
          value: values["passport-number"],
          errorMessage: errors["passport-number"]
        }) }}

        {% set dateInputDayClass = "govuk-input--width-2" %}
        {% set dateInputMonthClass = "govuk-input--width-2" %}
        {% set dateInputYearClass = "govuk-input--width-4" %}

        {% if errors["expiry-day"] %}
          {% set dateInputDayClass = dateInputDayClass + " govuk-input--error" %}
        {% endif %}
        {% if errors["expiry-month"] %}
          {% set dateInputMonthClass = dateInputMonthClass + " govuk-input--error" %}
        {% endif %}
        {% if errors["expiry-year"] %}
          {% set dateInputYearClass = dateInputYearClass + " govuk-input--error" %}
        {% endif %}

        {{ govukDateInput({
          id: "expiry",
          namePrefix: "expiry",
          fieldset: {
            legend: {
              text: "Expiry date",
              classes: "govuk-fieldset__legend--m"
            }
          },
          hint: {
            text: "For example, 31 3 1980"
          },
          items: [
            {
              classes: dateInputDayClass,
              name: "day",
              value: values["expiry-day"]
            },
            {
              classes: dateInputMonthClass,
              name: "month",
              value: values["expiry-month"]
            },
            {
              classes: dateInputYearClass,
              name: "year",
              value: values["expiry-year"]
            }
          ],
          errorMessage: errors["expiry"]
        }) }}

        {{ govukButton({
          text: "Continue"
        }) }}

      </form>
    </div>
  </div>
{% endblock %}
